<template>
    <div class="register">
        <!-- 顶部 -->
        <van-nav-bar
            title="面经注册"
            left-text="返回"
            right-text="取消"
            left-arrow
            @click-left="onClickLeft"
            @click-right="onClickRight"
            class="transparent-nav"
        />

        <!-- 注册表单 -->
        <div class="form-container">
            <van-form ref="form" @submit="onSubmit">
                <van-field
                    v-model="username"
                    name="username"
                    label="用户名"
                    placeholder="请输入用户名"
                    :rules="rules.username"
                    class="glass-input"
                />
                <van-field
                    v-model="password"
                    type="password"
                    name="password"
                    label="密码"
                    placeholder="请输入密码"
                    :rules="rules.password"
                    class="glass-input"
                />
                <div style="margin: 32px 16px 16px">
                    <van-button
                        block
                        type="primary"
                        native-type="submit"
                        class="gradient-button"
                    >
                        立即注册
                    </van-button>
                </div>
                <div class="switch-link">
                    <router-link to="/login">
                        <span>已有账号？</span>
                        <span class="highlight">立即登录</span>
                    </router-link>
                </div>
            </van-form>
        </div>
    </div>
</template>

<script>
import { Toast } from 'vant'
import { register } from '@/api/user'

export default {
  data () {
    return {
      username: '',
      password: '',
      rules: {
        username: [
          { required: true, message: '请填写用户名' },
          { min: 5, max: 12, message: '长度在 5到 12 个字符' }
        ],
        password: [
          { required: true, message: '请填写密码' },
          { pattern: /^[a-zA-Z0-9]{6,20}$/, message: '密码必须为6-20位字母或数字' }
        ]
      }
    }
  },
  methods: {
    onClickLeft () {
      this.$router.back()
    },
    onClickRight () {
      Toast.fail('取消注册')
      this.$router.push({ path: '/login' })
    },
    async onSubmit (values) {
      try {
        await this.$refs.form.validate()
        this.$toast.loading('注册中...')
        await register({
          username: values.username,
          password: values.password
        })
        this.$toast.success('注册成功')
        this.$router.push('/login')
      } catch (error) {
        this.$toast.clear()
      }
    }
  }
}
</script>

<style lang="less" scoped>
.register {
  width: 100vw;
  height: 100vh;
  background: url('@/assets/karina1.png') center/cover no-repeat;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      135deg,
      rgba(255, 182, 193, 0.15) 0%,
      rgba(255, 218, 185, 0.1) 25%,
      rgba(173, 216, 230, 0.08) 50%,
      rgba(221, 160, 221, 0.12) 75%,
      rgba(255, 192, 203, 0.1) 100%
    );
    backdrop-filter: blur(1px);
  }

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
      circle at 30% 20%,
      rgba(255, 255, 255, 0.1) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 70% 80%,
      rgba(255, 255, 255, 0.08) 0%,
      transparent 50%
    );
  }
}

.transparent-nav {
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

  :deep(.van-nav-bar__title),
  :deep(.van-nav-bar__text),
  :deep(.van-icon) {
    color: rgba(255, 255, 255, 0.9) !important;
  }
}

.form-container {
  position: relative;
  z-index: 10;
  margin: 20vh 20px 0;
  padding: 30px 20px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(1px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 24px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.glass-input {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 12px !important;
  margin-bottom: 16px;
  backdrop-filter: blur(1px);
  transition: all 0.3s ease;

  &:focus-within {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
  }

  :deep(.van-field__label),
  :deep(.van-field__control) {
    color: rgba(255, 255, 255, 0.9) !important;
  }

  :deep(.van-field__control::placeholder) {
    color: rgba(255, 255, 255, 0.6) !important;
  }
}

.gradient-button {
  background: linear-gradient(
    135deg,
    rgba(255, 107, 129, 0.8) 0%,
    rgba(255, 154, 158, 0.8) 100%
  ) !important;
  border: none !important;
  border-radius: 12px !important;
  color: rgba(255, 255, 255, 0.95) !important;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(255, 107, 129, 0.3);
  transition: all 0.3s ease;

  &:active {
    transform: translateY(1px);
    box-shadow: 0 2px 10px rgba(255, 107, 129, 0.4);
  }
}

.switch-link {
  text-align: center;
  margin-top: 20px;

  a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
  }

  .highlight {
    color: rgba(255, 182, 193, 0.9);
    font-weight: 600;
    margin-left: 4px;
  }

  &:hover {
    color: rgba(255, 255, 255, 1);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  }
}
</style>
